<template>
  <view class="report-detail">
    <!-- 报告基本信息 -->
    <view class="info-card">
      <view class="header">
        <text class="title">{{ report.name }}</text>
        <text class="status" :class="report.status">{{ report.statusText }}</text>
      </view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">检查时间</text>
          <text class="value">{{ report.checkTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">报告时间</text>
          <text class="value">{{ report.reportTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">检查科室</text>
          <text class="value">{{ report.department }}</text>
        </view>
        <view class="info-item">
          <text class="label">检查医生</text>
          <text class="value">{{ report.doctor }}</text>
        </view>
      </view>
    </view>
    
    <!-- 检查结果 -->
    <view class="result-card">
      <view class="section-title">检查结果</view>
      <view class="result-content">
        <text>{{ report.result }}</text>
      </view>
      
      <!-- 检查图片 -->
      <block v-if="report.images?.length">
        <view class="section-title">检查图片</view>
        <view class="image-list">
          <image 
            v-for="(image, index) in report.images"
            :key="index"
            :src="image"
            mode="aspectFill"
            @tap="previewImage(index)"
          />
        </view>
      </block>
    </view>
    
    <!-- 医生建议 -->
    <view class="advice-card">
      <view class="section-title">医生建议</view>
      <view class="advice-content">
        <text>{{ report.advice }}</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="action-btn outline" @tap="downloadReport">下载报告</button>
      <button class="action-btn primary" @tap="shareReport">分享报告</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 报告数据
const report = ref({
  id: 1,
  name: '心电图检查报告',
  status: 'normal', // normal-正常 abnormal-异常
  statusText: '正常',
  checkTime: '2024-03-25 09:30',
  reportTime: '2024-03-25 10:30',
  department: '心内科',
  doctor: '张医生',
  result: '窦性心律，心率75次/分，各导联ST-T未见明显异常。',
  images: [
    '/static/report/ecg1.jpg',
    '/static/report/ecg2.jpg'
  ],
  advice: '建议定期复查，保持良好的生活习惯，适量运动。'
})

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    urls: report.value.images,
    current: index
  })
}

// 下载报告
const downloadReport = () => {
  uni.showLoading({
    title: '下载中...'
  })
  
  // 这里调用下载API
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '下载成功',
      icon: 'success'
    })
  }, 1500)
}

// 分享报告
const shareReport = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 1,
    summary: `${report.value.name} - ${report.value.statusText}`,
    success: (res) => {
      console.log('分享成功:', res)
    },
    fail: (err) => {
      console.error('分享失败:', err)
    }
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const id = page.$page?.options?.id
  
  // 加载报告数据
  loadReport(id)
})

// 加载报告数据
const loadReport = (id) => {
  // 这里调用API获取数据
  console.log('加载报告:', id)
}
</script>

<style lang="scss">
.report-detail {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx 20rpx 120rpx;
  
  .info-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .status {
        font-size: 24rpx;
        padding: 4rpx 12rpx;
        border-radius: $radius-sm;
        
        &.normal {
          color: $success;
          background: rgba($success, 0.1);
        }
        
        &.abnormal {
          color: $warning;
          background: rgba($warning, 0.1);
        }
      }
    }
    
    .info-list {
      .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .value {
          font-size: 26rpx;
          color: $text-primary;
        }
      }
    }
  }
  
  .result-card,
  .advice-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 30rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .result-content,
    .advice-content {
      text {
        font-size: 28rpx;
        color: $text-regular;
        line-height: 1.6;
      }
    }
    
    .image-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      
      image {
        width: 220rpx;
        height: 220rpx;
        border-radius: $radius-sm;
      }
    }
  }
  
  .bottom-buttons {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      border-radius: $radius-xl;
      
      &.outline {
        color: $primary-color;
        background: #fff;
        border: 2rpx solid $primary-color;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 